import {Button, Card, Descriptions, Tabs, Tree} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {goto, isSuccess} from "@/utils/utils";
import {CourseManager} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";
import 'braft-editor/dist/index.css'

const CourseDetail: React.FC<any> = ({match: {params: {id}}}) => {

  const [course, setCourse] = useState<any>(undefined)

  const queryCourseDetail = (id: number) => {
    if (id) {
      CourseManager.detail(id).then(({code, data}) => {
        if (isSuccess(code)) {
          setCourse(data)
        }
      })
    }
  }

  useEffect(() => queryCourseDetail(id), [id])

  return (
    <PageContainer>
      <Card bordered={false}>
        <Tabs destroyInactiveTabPane={true} tabBarExtraContent={<Button type='primary' onClick={() => goto(`/course/edit/${id}`)}>编辑</Button>}>
          <Tabs.TabPane forceRender tab='课程信息' key="ARTICLE_BASIC_INFO">
            <Descriptions title="基本信息" style={{ marginBottom: 32 }}>
              <Descriptions.Item label="课程ID">{id}</Descriptions.Item>
              <Descriptions.Item label="课程标题">{course?.title}</Descriptions.Item>
              <Descriptions.Item label="课程老师">{course?.userDto?.nickName}</Descriptions.Item>
              <Descriptions.Item label="课程分类">{course?.difficulty?SYS_ENUMS.COURSE_DIFFICULTY[course?.difficulty]?.label:'-'}</Descriptions.Item>
              <Descriptions.Item label="课程标签">
                {course?.labelDtoList?.map((tag: any, index: number) => `${index > 0 ? ',' : ''}${tag?.name}`)}
              </Descriptions.Item>
              <Descriptions.Item label="付费类型">{course?.paymentType?SYS_ENUMS.RESOURCE_PAYMENT_TYPE[course?.paymentType]?.label:'-'}</Descriptions.Item>
              <Descriptions.Item label="是否加入会员免费">{course?.membersFree?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="价格"><span style={{color:'red'}}>{course?.sellingPrice??'-'}</span></Descriptions.Item>
              <Descriptions.Item label="原价">{course?.originalPrice??'-'}</Descriptions.Item>
              <Descriptions.Item label="上架状态">{course?.sellingState?SYS_ENUMS.SELLING_STATE[course?.sellingState]?.label:'-'}</Descriptions.Item>
              <Descriptions.Item label="课时数">{course?.videoNum??'-'}</Descriptions.Item>
              <Descriptions.Item label="学员圈子">
                {
                  course?.circle
                    // ? <a href={course?.cover?.url} rel="noreferrer" target='_blank'>{course?.circle?.name}</a>
                    ? course?.circle?.title
                    : '暂无'
                }
              </Descriptions.Item>
              <Descriptions.Item label="课程封面"><a rel="noreferrer" href={course?.cover?.url} target='_blank'>{course?.cover?.name}</a></Descriptions.Item>
              <Descriptions.Item label="课程详情"><a rel="noreferrer" href={course?.detailImage?.url} target='_blank'>{course?.detailImage?.name}</a></Descriptions.Item>
              <Descriptions.Item label="课程描述">{course?.profile}</Descriptions.Item>
              <Descriptions.Item label="编辑时间">{course?.gmtModified}</Descriptions.Item>
              <Descriptions.Item label="发布时间">{course?.gmtCreate}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="数据统计" style={{ marginBottom: 32 }}>
              <Descriptions.Item label="浏览量">{course?.browseNum ?? 0}</Descriptions.Item>
              <Descriptions.Item label="订阅人数">{course?.tradingNum ?? 0}</Descriptions.Item>
              <Descriptions.Item label="评论数量">{course?.replyNum ?? 0}</Descriptions.Item>
              <Descriptions.Item label="点赞数量">{course?.greatNum ?? 0}</Descriptions.Item>
              <Descriptions.Item label="收藏数量">{course?.focusNum ?? 0}</Descriptions.Item>
              <Descriptions.Item label="分享数量">{course?.shareNum ?? 0}</Descriptions.Item>
              <Descriptions.Item label="评分">{course?.shareNum}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="详细内容" style={{ marginBottom: 32 }} column={1}>
              <Descriptions.Item>
                <Tree treeData={course?.courseItems??[]}
                      blockNode
                      selectable={false}
                      showLine
                      fieldNames={{title: 'name', key: 'key', children: 'child'}}
                />
              </Descriptions.Item>
            </Descriptions>
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </PageContainer>
  );
};

export default CourseDetail;
